@import '../../config.scss';
page {
  height: 100%;
}
.index {
  height: 100%;
  overflow: hidden;
  .main {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 70%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.header {
  min-height: 460px;
  background-color: $menu-page-background-color;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  .cover {
    width: 100%;
    height: 100%;
    position: relative;
    .header-content {
      display: flex;
      align-items: center;
      padding-left: 20px;
      .headimg {
        border: 2px solid #ffffff;
        border-radius: 50%;
      }
      .header-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #ffffff;
        font-size: 30px;
        .level-btn {
          min-width: 100px;
          padding: 0 14px;
          text-align: center;
          background-color: rgb(0, 122, 204);
          border-radius: 15px;
          font-size: 20px;
          height: 28px;
          line-height: 28px;
        }
        .name-level {
          display: flex;
          align-items: center;
        }
      }
    }
    .extra-content {
      width: 100%;
      display: flex;
      margin: 50px auto;
      justify-content: space-around;
      .item {
        width: 33%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .item-border {
        border-right: 1px solid #ffffff;
      }
      .value {
        font-size: 28px;
        color: #ffffff;
      }
      .title {
        font-size: 20px;
        color: #cccccc;
      }
    }
  }
}
.ml-20 {
  margin-left: 20px;
}
.mr-20 {
  margin-right: 20px;
}
.ml-30 {
  margin-left: 30px;
}
.level-wrap {
  display: flex;
  align-items: center;
}
